<template>
	<view class="container">
		<view class="form">
			<textarea value="" placeholder="备注信息" @input='bindcontent' maxlength=200 > </textarea>
			<view class="num"><text class="current-len">{{videoForm.content.length}}</text>/200</view>
			<view class="">
				<picker :range="classes" @change="onSelectClasses" range-key="name">
					<view>{{classes_select.name ? classes_select.name : '选择班级'}}</view>
				</picker>
			</view>
			<view class="file">
				<!-- <view class="upload-icon">
					<view class="h"></view>
					<view class="v"></view>
				</view> -->
				<image @click="upLoadVideo" :src="loadVideo ? loadVideo : '/static/default-image.png'" mode="aspectFit"></image>
				<view>上传视频(仅支持180M以下大小的视频文件)</view>
				<view>{{src}}</view>
				<view style="color: #DD524D;">{{uploadtext}}</view>
			</view>
			<view class="submit">
				<button @click="submit">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import {qiniuUpload} from './qiniu.min.js'
	export default {
		data() {
			return {
				videoForm: {
					title: '',
					content: ''
				},
				loadVideo: '',
				src:'',
				uploadtext:'',
				tempFilePath:'',
				classes: [],
				classes_select: {}
			};
		},
		onLoad() {
			let userinfo = uni.getStorageSync('userinfo');
			let BASE_URL=uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/user/get_classes',
				data: {
					uid:userinfo.id,
				},
				method:'POST',
				success:(res) =>{
					console.log(res.data);
					if(res.data.code=="0"){
						this.classes = res.data.data
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'none'
						});
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
		},
		methods: {
			onSelectClasses(event) {
				this.classes_select = this.classes[event.detail.value]
			},
			bindtitle(e) {
				this.videoForm.title = e.detail.value
			},
			bindcontent(e) {
				this.videoForm.content = e.detail.value
			},
			upLoadVideo() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res)=> {
						console.log(res)
						
						this.tempFilePath = res.tempFilePath;
						if(this.tempFilePath !=''){
							uni.showLoading({
							    title: '上传中'
							})
							// this.uploadStart()
							let BASE_URL = uni.BASE_URL
							uni.uploadFile({
								url: BASE_URL+'index/upload/layUpload', //仅为示例，非真实的接口地址
								filePath: this.tempFilePath,
								name: 'file',
								// header:{"Content-Type": "multipart/form-data"},
								success: (res1) => {
									let data=JSON.parse(res1.data)
									console.log(data)
									// uni.setStorageSync('videosrc', res1.data.data);
									this.uploadtext = '√上传成功'
									this.src=data.data
									uni.hideLoading()
								}
							})
						}
					}
				})
			},
			uploadStart(){
				let BASE_URL = uni.BASE_URL
				uni.uploadFile({
					url: BASE_URL+'index/upload/layUpload', //仅为示例，非真实的接口地址
					filePath: this.tempFilePath,
					name: 'file',
					// header:{"Content-Type": "multipart/form-data"},
					success: (res1) => {
						let data=JSON.parse(res1.data)
						console.log(data)
						// uni.setStorageSync('videosrc', res1.data.data);
						this.uploadtext = '√上传成功'
						this.src=data.data
						uni.hideLoading()
					}
				})
			},
			submit () {
				if(!this.classes_select.id) {
					uni.showToast({
						title: '请先选择班级',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(this.videoForm.content == '' || this.src == '' || !this.src || this.src == undefined) {
					uni.showToast({
						title: '描述、视频资源不能为空',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				console.log(this.src,'资源地址')
				let userinfo=uni.getStorageSync('userinfo')
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/add_video',
					data:{
						uid:userinfo.uid,
						name:this.videoForm.title,
						src:this.src,
						content:this.videoForm.content,
						media:'video',
						classes_id: this.classes.id
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						uni.showToast({
							title:'打卡成功'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/user/user'
							})
						},1000)
					},
					fail:(res)=> {
						console.log(res.data);
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.container{
	padding: 15px;
	color: #808080;
	overflow: hidden;
	.form {
		uni-textarea{
			width: 100%;
			height: 220px;
		}
		textarea{
			color: #333;
		}
		.num{
			text-align: right;
			.current-len{
				color: #333;
				font-weight: bold;
			}
		}
		.name, .phone {
			width: 690upx;
			height: 80upx;
			border: 2upx solid #333;
			border-radius: 10upx;
			margin: 20upx 30upx 0;
			padding-left: 20upx;
			box-sizing: border-box;
		}
		.file {
			.upload-icon{
				width: 100px;
				height: 100px;
				border: 1px solid #d8d8d8;
				border-radius: 5px;
				position: relative;
				.h{
					position: absolute;
					width: 3px;
					height: 20px;
					background: #d8d8d8;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.v{
					position: absolute;
					width: 20px;
					height: 3px;
					background: #d8d8d8;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			margin-top: 20px;
			image {
				width: 150upx;
				height: 150upx;
				//margin: 30upx 0 0 30upx;
				border: 2upx dotted #eee;
				border-radius: 10upx;
				box-shadow: 5upx 5upx 5upx 5upx #ddd;
			}
			text {
				font-size: 30upx;
				color: #333;
				margin-left: 20upx;
			}
		}
		.submit {
			width: 100%;
			height: 120upx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 100px;
			button {
				width: 650upx;
				height: 120upx;
				background-color: #4b89ff;
				border-radius: 120upx;
				color: #fff;
				line-height: 120upx;
			}
		}
	}
}
</style>
